<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>巧用css_sticky实现返回顶部功能</title>
    <style>
        html,
        body {
            scroll-behavior: smooth;
        }

        ul,li {
            margin: 0;
            padding:0;
            list-style: none;
        }

        .back {
            display: block;
            position: sticky;
            float: right;
            margin-top: -50px;
            /*自身高度*/
            top: -110px;
            /*60 + 50*/
            transform: translateY(calc(100vh + 50px));
            border-radius: 50%;
            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E %3Cpath fill='%23ffffff' d='M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z'%3E%3C/path%3E %3C/svg%3E") center no-repeat dodgerblue;
            background-size: 50%;
            width: 50px;
            height: 50px;
        }
    </style>
</head>

<body>
    <a href="#ul" class="back"></a>
    <article>
        <ul id="ul"></ul>
    </article>

</body>
<script>
    let element = document.getElementById("ul")
    let fragment = document.createDocumentFragment()
    for (let i = 0; i < 500; i++) {
        let li = document.createElement('li')
        li.innerHTML = '一般为了让一个元素不占空间，可能想到的方法是设置绝对定位。但是这里由于设置了 position: sticky，所以肯定不能再设置绝对定位了。除此之外，我们还可以采用浮动float，可以很轻易的解决以上两个布局问题'
        fragment.appendChild(li)
    }
    element.appendChild(fragment);
</script>

</html>